<template>
	<view class="container" style="background-color:#F6F6F6 ;min-height: 100vh;">
		<view class="search-view-container">
			<view class="search-view" @click="goToSearchMall()">
				<image class="search-view-icon" src="../../static/images/search@3x.png"></image>
				<input maxlength="50" class="search-view-input" placeholder="请输入商品名称" disabled="disabled" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="hot-container__header">
			<view class="tabs">
				<liuyuno-tabs
					:tabData="productCategoryList"
					:activeIndex="selectTab"
					:config="{
						color: '#999',
						activeColor: '#ff7c0b',
						underLineColor: '#ff7c0b'
					}"
					@tabClick="selectTabOnClick"
				/>
			</view>
		</view>
		<view class="hot-container__content">
			<view v-if="productList.length == 0" class="empty"><text>抱歉！暂无商品</text></view>
			<view v-else>
				<view class="hot-container__content-item"  :key="categoryIndex">
				<!-- 	<view class="hot-container__header">
						<view class="hot-container__header-name">{{ categoryItem.CateName }}</view>
					</view> -->
					<view class="sell-container">
						<mall-product-card
							class="sell-item"
							v-for="(item, index) in productList"
							:key="index"
							:itemData="item"
							@clickProductItem="clickProductItem(item.Id)"
						></mall-product-card>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cart-view-container bottom-change-view" @click="clickToCart">
		  <image
		    class="cart-view-container-icon"
		    src="../../static/images/shopcart.png"
		  ></image>
		  <text class="cart-view-container-text">{{ productNum }}</text>
		</view>
	</view>
</template>

<script>
import mallProductCard from '@/pages/mall/components/mall-product-card.vue';
import { mallProductList, getProductCategory, getWebStoreProductInfoList,allCategory,queryProductByCate } from '@/constant/mall.js';
import liuyunoTabs from '@/components/liuyuno-tabs/liuyuno-tabs.vue';
import { showShareMenu } from '@/config/common.js';
import { getCartNum, addCart } from "@/constant/cart.js";
export default {
	components: {
		mallProductCard,
		liuyunoTabs
	},
	data() {
		return {
			mallList: [],
			productCategoryList: [],
			productList: [],
			selectTab: 0,
			query_filter: {
				categoryId: '',
				KeyWords: '',
				pageIndex: 0,
				pageSize: 10
			},
			productNum:0,
			 customerId: uni.getStorageSync("customerId"),
		};
	},
	onLoad() {
		// this.searchProductList();
		
		
		showShareMenu();
	},
	onShow() {
		this.getProductCategory();
		this.getCartNum()
		this.query_filter.KeyWords = '';
	},
	onReachBottom() {
		this.query_filter.pageIndex++;
		this.searchProductList();
	},
	onPullDownRefresh() {
		this.query_filter.pageIndex = 0;
		this.searchProductList();
	},
	methods: {
		async getCartNum() {
		  let result = await getCartNum({
		    customerId: this.customerId,
		  });
		  this.productNum = result.data.total;
		},
		clickToCart() {
		  uni.navigateTo({
		    url: '/pagesB/mall/cart/index',
		  });
		},
		goToSearchMall() {
			uni.navigateTo({
				url: './searchmall/index'
			});
		},
		async getProductCategory() {
			this.productCategoryList = [];
			this.productCategoryList = await allCategory({});
			
			this.query_filter.categoryId = this.productCategoryList[0].id*1;
			
			this.getWebStoreProductInfoList();
			// result.forEach(item => {
			// 	this.productCategoryList.push({
			// 		Id: item.id,
			// 		name: item.name
			// 	});
			// });
		},
		async searchProductList() {
			let res = await queryProductByCate(this.query_filter);
			if (res.TotalNumber > this.query_filter.pageIndex * this.query_filter.pageSize) {
				uni.stopPullDownRefresh();
				if (this.query_filter.pageIndex > 0) {
					for (let i = 0; i < res.Source.length; i++) {
						let obj = res.Source[i];
						this.mallList.push(obj);
					}
				} else {
					this.mallList = res.Source;
				}
			} else {
				return;
			}
		},
		async getWebStoreProductInfoList() {
			const result = await queryProductByCate(this.query_filter.categoryId);
			this.mallList=result
			if(this.query_filter.categoryId==0){
				this.productList = [];
				result.forEach(iten=>{
					this.productList=this.productList.concat(iten.list)
				})
				// console.log(this.productList,'----this.productList')
			}else{
				let one=result.find(item=>item.id==this.query_filter.categoryId)
				this.productList=one.list
			}
			
		},
		selectTabOnClick(index) {
			this.selectTab = index;
			this.query_filter.pageIndex = 0;
			let selectedTab = this.productCategoryList[index];
			if (selectedTab) {
				this.query_filter.categoryId = selectedTab.id;
				this.getWebStoreProductInfoList();
			}
		},
		clickProductItem(productId) {
			console.log('22')
			uni.navigateTo({
				url: './malldetail/index?productId=' + productId
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	// background-color: #f6f6f6;
	overflow-y: auto;
	overflow-x: hidden;
}

.sell-title {
	font-size: 30rpx;
	margin-left: 3%;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	display: block;
}

.sell-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 30rpx;
	padding-right: 30rpx;
	.sell-item {
		width: calc(50% - 12rpx);
		margin-bottom: 20rpx;
	}
}

.search-view-container {
	background-color: #fff;
	height: 76rpx;
	width: 100%;
	display: flex;
	align-items: center;

	.more-btn {
		width: 30rpx;
		height: 30rpx;
		margin-left: auto;
		margin-right: 20rpx;
	}

	.search-view {
		display: flex;
		align-items: center;
		background-color: #f5f6fd;
		height: 60rpx;
		border-radius: 30rpx;
		margin-left: 30rpx;
		width: 100%;
		margin-right: 30rpx;
		&-icon {
			width: 28rpx;
			height: 28rpx;
			margin-left: 30rpx;
			margin-right: 10rpx;
		}

		&-input {
			font-size: $main-text-size-28;
			width: 80%;
			.placeholder {
				font-size: $main-text-size-28;
				font-family: 'SourceHanSansCN-Regular';
				color: $main-text-color-grey;
			}
		}
	}
}
.empty {
	height: 87vh;
	line-height: 320rpx;
	text-align: center;
	color: #b5b5b7;
}

.cart-view-container {
	position: fixed;
	bottom: 60rpx;
	right: 20rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;

	&-icon {
		width: 64rpx;
		height: 64rpx;
	}

	&-text {
		color: #fff;
		position: absolute;
		top: 6rpx;
		right: 10rpx;
		background-color: rgb(211, 38, 90);
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}
}

.hot-container__header {
	display: flex;
	align-items: center;
	// padding: 20rpx;
	// height: 50rpx;
	margin-left: unset;
	// margin-left: 30rpx;
	background-color: #fff;
	&-name {
		font-family: 'SourceHanSansCN-Medium';
		font-size: $main-text-size-32;
	}

	&-left {
		width: 40rpx;
		height: 40rpx;
		margin-top: 8rpx;
	}

	&-icon {
		width: 30rpx;
		height: 30rpx;
		margin-left: auto;
		margin-right: 20rpx;
	}
}
.tabs::-webkit-scrollbar {
	display: none;
}
.tabs {
	font-size: 32rpx;
	color: #000;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
}
.hot-container__content {
	padding-top: 20rpx;
	height: calc(100% - 166rpx);
	&-item {
	}
	.swiper {
		height: 100%;
	}
}


.cart-view-container {
  position: fixed;
  bottom: 114rpx;
  right: 30rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  // background-color: #fff;
  &-icon {
    width: 56rpx;
    height: 56rpx;
  }

  &-text {
    color: #fff;
    position: absolute;
    top: 6rpx;
    right: 10rpx;
    background-color: #ff0000;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
  }
}
</style>
